<template>
    <el-container>
        <el-header>
            <el-row :gutter="20">
                <el-col :span="16">
                    用户信息管理系统
                </el-col>
                <el-col :span="8">
                    <el-dropdown class="topmenu">
                        <span class="el-dropdown-link">
                            <i class="el-icon-user-solid"></i>超级管理员<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>我的信息</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </el-header>
        <el-container class="mainbody">
            <el-aside width="200px">
                <el-menu default-active="1" :default-openeds="['1']" :unique-opened="true" class="el-menu-vertical-demo"
                    @open="handleOpen" @close="handleClose" background-color="#1c9389" text-color="#fff" :router="true"
                    active-text-color="#ffd04b">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="/admin">用户管理</el-menu-item>
                        <el-menu-item index="/role">角色管理</el-menu-item>
                        <el-menu-item index="/menu">菜单管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>系统设置</span>
                        </template>
                        <el-menu-item index="2-1">基本设置</el-menu-item>
                        <el-menu-item index="2-2">邮件配置</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <el-main>
                <el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        {{title}}
                    </el-breadcrumb-item>
                </el-breadcrumb>
                <div style="background: #fff; overflow: hidden;">
                    <router-view @setTitle="setTitle"></router-view>
                </div>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: 'RbacUiHome',

        data() {
            return {
                title: ''
            };
        },

        mounted() {
            document.title = '用户信息管理系统'
        },

        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            setTitle(title) {
                this.title = title;
                document.title = `用户信息管理系统-${title}`;
            }
        },
    };
</script>

<style>
    .el-header {
        background-color: #1c9389;
        color: #fff;
        text-align: left;
        line-height: 60px;
    }

    .el-aside {
        background-color: #1c9389;
        color: #fff;
        text-align: left;
        line-height: 200px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #fff;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .topmenu {
        float: right;
    }

    .mainbody {
        height: calc(100vh - 60px);
    }

    .el-menu {
        border: none;
    }

    .el-submenu,
    .el-menu-item {
        text-align: left;
    }

    .el-submenu__title i {
        color: #fff;
    }

    .breadcrumb {
        height: 36px;
        background: #fff;
        padding-top: 23px;
        padding-left: 16px;
        margin-left: 1px;
        margin-right: 1px;
    }
</style>